<template>
  <el-dialog
    title="培育配置"
    destroy-on-close
    :visible.sync="dialogVisible"
    width="40%"
  >
    <el-form ref="onok" :model="model">
      <div
        v-for="(item, index) in feedList"
        :key="index"
      >
        <p class="labelWrap">
          <span class="star">*</span>
          <span class="label">{{ item.label }}</span>
        </p>
        <div
          style="display: flex;"
        >
          <el-form-item
            :prop="'frontValue' + index"
            :rules="{ required: !item.frontValue, message: '不能为空', trigger: 'change' }"
          >
            <el-input-number v-model="model['frontValue' + index]" type="number" :min="0" @change="(cur, pre) => onInputNumber(cur, pre, index, 'frontValue')" />
            <span style="display: inline-block; width: 50px; margin-left: 5px; text-align: center;">{{
              item.frontText
            }}</span>
          </el-form-item>
          <el-form-item
            :prop="'backValue' + index"
            :rules="{ required: !item.backValue, message: '不能为空', trigger: 'change' }"
          >
            <el-input-number
              v-model="model['backValue' + index]"
              :min="0"
              type="number"

              @change="(cur, pre) => onInputNumber(cur, pre, index, 'backValue')"
            /><span style="margin-left: 5px;">{{ item.backText }}</span>
          </el-form-item>
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin: 10px 2px;">
        <el-checkbox v-model="refreshVideo">刷视频</el-checkbox>
        <el-checkbox v-model="refreshLive">刷直播间</el-checkbox>
        <el-checkbox v-model="refreshFocus">刷施肥</el-checkbox>
      </div>
      <div style="text-align: center;">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button

          type="primary"
          @click="onSubmit('onok')"
        >确 定</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { handelFeedNumber } from '../../../request/facilityList'
import { FEEDNUMBER, EMPTYPARAMS } from './constants'
export default {
  data() {
    return {
      dialogVisible: false,
      feedList: FEEDNUMBER,
      refreshVideo: false,
      refreshLive:false,
      refreshFocus:false,
      model: {}
    }
  },
  // computed: {
  //   model: () => FEEDNUMBERMODEL()
  // },
  watch: {
    dialogVisible() {
      this.handelFeedNumber('get')
    }
  },
  created() {
    this.changeModel(FEEDNUMBER)
    this.handelFeedNumber('get')
  },
  methods: {
    async onSubmit(name) {
      this.$refs[name].validate(valid => {
        console.log('valid', valid)
        if (valid) {
          this.handelFeedNumber('update', 'post')
        }
        // else {
        //   this.$error(res.msg)
        // }
      })
    },
    handelOpen() {
      this.dialogVisible = true
    },
    handelClose() {
      this.dialogVisible = false
    },
    async handelFeedNumber(type, method) {
      const params = {}
      Object.keys(EMPTYPARAMS).forEach((ele, index) => {
        params[
          ele
        ] = `${this.feedList[index].frontValue},${this.feedList[index].backValue}`
      })

      params.isVideo = this.refreshVideo
      params.isLive = this.refreshLive
      params.isfocus = this.refreshFocus
      const res = await handelFeedNumber(type, params, method)
      if (!method) {
        Object.keys(EMPTYPARAMS).forEach((ele, index) => {
          this.$set(this.feedList, index, {
            ...FEEDNUMBER[index],
            frontValue: res[ele]?.split(',')[0],
            backValue: res[ele]?.split(',')[1]
          })
        })
        this.refreshVideo = res.isVideo === 'False'
        this.refreshLive = res.isLive === 'False'
        this.refreshFocus = res.isfocus === 'False'
        console.log('this.list', this.feedList)
        this.changeModel(this.feedList)
        return
      }
      console.log('res', res)
      if (res) {
        console.log('成功')
        this.$success('操作成功')
      }
      this.handelClose()
    },
    onInputNumber(cur, pre, index, key) {
      console.log('111111')
      console.log('cur, pre, index', cur, pre, index, key)
      this.$set(this.feedList, index, {
        ...FEEDNUMBER[index],
        [key]: cur
      })
    },
    changeModel(list) {
      if (list?.constructor === Array) {
        list.forEach((ele, index) => {
          console.log('elel', ele)
          this.$set(this.model, [`frontValue${index}`], ele.frontValue)
          this.$set(this.model, [`backValue${index}`], ele.backValue)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog__body {
  display: flex;
  justify-content: center;
}

.labelWrap {
  position: relative;
  margin: 5px 0;
}
.star {
  position: absolute;
  left: 0px;
  top: 2px;
  font-size: 18px;
  display: inline-block;
  color: red;
  height: 23px;
  line-height: 23px;
}

.label {
  height: 23px;
  line-height: 23px;
  display: inline-block;
  margin-left: 8px;
}
</style>
